<template>
  <el-card class="user-card" :body-style="{ padding: '20px' }">
    <div class="user-header">
      <el-avatar :src="user.avatar" :size="60" />
      <div class="user-info">
        <h3>{{ user.username }}</h3>
        <p class="user-email">{{ user.email }}</p>
        <div class="user-roles">
          <el-tag
            v-for="role in user.roles"
            :key="role"
            :type="getTagType(role)"
            size="small"
            style="margin-right: 4px"
          >
            {{ role }}
          </el-tag>
        </div>
      </div>
    </div>

    <div class="user-actions" v-if="showActions">
      <el-button type="primary" size="small" @click="handleEdit">
        <el-icon><Edit /></el-icon>
        编辑
      </el-button>
      <el-button type="danger" size="small" @click="handleDelete">
        <el-icon><Delete /></el-icon>
        删除
      </el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from "vue";
import type { UserInfo } from "@/api/user";

interface Props {
  user: UserInfo;
  showActions?: boolean;
}

interface Emits {
  (e: "edit", user: UserInfo): void;
  (e: "delete", user: UserInfo): void;
}

const props = withDefaults(defineProps<Props>(), {
  showActions: true,
});

const emit = defineEmits<Emits>();

// 根据角色返回对应的标签类型
const getTagType = (role: string) => {
  const roleTypes: Record<string, string> = {
    admin: "danger",
    user: "success",
    guest: "info",
  };
  return roleTypes[role] || "primary";
};

// 处理编辑
const handleEdit = () => {
  emit("edit", props.user);
};

// 处理删除
const handleDelete = () => {
  emit("delete", props.user);
};
</script>

<style scoped>
.user-card {
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.user-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.user-info {
  margin-left: 16px;
  flex: 1;
}

.user-info h3 {
  margin: 0 0 4px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.user-email {
  margin: 0 0 8px 0;
  color: #909399;
  font-size: 14px;
}

.user-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.user-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}
</style>
